<template>
  <div class="editSome">
    <div class="header-search">
      <el-button @click="goToSearch">查询</el-button>
      <el-button @click="clickEmitInectFunc">触发inject注入的方法</el-button>
      <el-button @click="goToLogin">模拟登录效果</el-button>
      <el-button @click="cancleRequst">取消请求</el-button>
    </div>
    <div class="tableBox margin-top height-100">
      <el-table :data="tableData" :style="tableStyles">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
      <div class="page-box margin-top">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[100, 200, 300, 400]"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, CSSProperties, inject, reactive, ref, onMounted } from "vue";
import { showFullScreenLoading, tryHideFullScreenLoading } from "@/config/serviceLoading";
import type { ComponentSize } from "element-plus";
import { loginApi } from "@/api/modules/lkssy/";
import { pendingMap } from "@/api/helper/axiosCancel";

const currentPage = ref(4);
const pageSize = ref(100);
const background = ref(false);
const disabled = ref(false);
const tableData: tableType[] = reactive([]);
const total = computed(() => tableData.length);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
const showConsole: Function = inject("my-console") as Function;

const clickEmitInectFunc = () => {
  showConsole();
};

const tableStyles = { height: `calc(100% - ${50}px)`, width: "100%" } as CSSProperties;

interface tableType {
  date: String;
  name: String;
  address: String;
}

onMounted(() => {
  console.log("表格2的mounted");
});

const cancleRequst = () => {
  console.log("pendingMap", pendingMap);
  pendingMap.forEach(controller => {
    controller && controller.abort();
  });
  pendingMap.clear();
};

/**
 * 模拟登录效果
 */
const goToLogin = async () => {
  const res = await loginApi({});
};

/**
 * 点击查询按钮
 */
const goToSearch = () => {
  showFullScreenLoading();
  try {
    setTimeout(() => {
      for (let i = 0; i < 500; i++) {
        tableData.push({
          date: "2016-05-01",
          name: `Tom${i}`,
          address: "No. 189, Grove St, Los Angeles"
        });
      }
      console.log("tableData", tableData);
      tryHideFullScreenLoading();
    }, 500);
  } catch (error) {}
};
</script>
<style lang="scss">
.editSome {
  height: calc(100% - 32px);
}
.page-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
